<template>
  <div class="xmlReview">
    <div class="review">
      <h1 class="title">退信邮件</h1>
      <h2 class="email-content">邮件详情:</h2>
      <ul class="review-detail">
        <li><b>发件人：</b><span>{{info.senderNickName}}</span></li>
        <li><b>收件人：</b><span v-for="item,index in info.addresseeEmail.split(',')">{{item}};</span></li>
        <li v-show="info.emailCarbonCopy!=''"><b>抄 送：</b><span
          v-for="item,index in info.emailCarbonCopy.split(',')">{{item}};</span>
        </li>
        <li v-show="info.emailSecretDelivery!=''"><b>密 送：</b><span
          v-for="item,index in info.emailSecretDelivery.split(',')">{{item}};</span>
        </li>
        <li><b>时 间：</b><span>{{info.sendTime}}</span></li>
        <li><b>主 题：</b><span>{{info.emailSubject}}</span></li>
      </ul>
      <h2 class="email-content">邮件内容:</h2>
      <div class="mine">
        <div v-html="info.emailContent"></div>
      </div>
      <div class="else-file" v-show="info.emailHtmlpicList.length>0">
        <h3>附件 <i class="iconfont icon-wenjian"></i></h3>
        <MailFile :list="info.emailHtmlpicList"></MailFile>
      </div>
    </div>
  </div>
</template>

<script>
    import MailFile from '@/components/mail/file/MailFile'
    import {getMailDetail} from "@/api/mail/make"
    export default {
        name: "Review",
        components: {MailFile},
        data() {
            return {
                info: {addresseeEmail:'',emailCarbonCopy:'',emailSecretDelivery:'',emailHtmlpicList:[]}
            }
        },
        created() {
            this.getDetail()
        },
        methods:{
            getDetail(){
                getMailDetail(this.$route.query.id).then(res => {
                    if (res.data.success) {
                        this.info = res.data.data;
                        console.log(this.info)
                    }
                })
            }
        }
    }
</script>

<style scoped lang="scss">
  $activeColor: #232323;
  .xmlReview {
    width: 1200px;
    margin: 0 auto;
    background-color: #fff;
    overflow-y: scroll;
    height: 100%;

    .review {
      width: 1024px;
      margin: 0 auto 100px;

      .title {
        color: #435B77;
        line-height: 40px;
        font-size: 18px;
        padding: 30px 0 20px 0;
        border-bottom: 1px solid #ddd;
      }

      .review-detail {

        li {
          line-height: 30px;
          font-size: 14px;
          color: $activeColor;

          b {
            display: inline-block;
            width: 80px;
            text-align: right;
            font-weight: normal;
            color: #000;
          }

          span {
            color: #333;
            font-size: 13px;
            margin-right: 10px;
          }
        }
      }

      .email-content {
        font-weight: 600;
        font-size: 15px;
        color: #000;
        padding-top: 30px;
        margin-bottom: 10px;
      }

      .mine {
        margin: 0 30px;
      }

      .else-file {

        h3 {
          font-size: 15px;
          color: #000;
          line-height: 40px;
        }
      }

      .send-name {
        font-size: 13px;
        color: #333;
        line-height: 35px;
        margin-top: 20px !important;

        span {
          font-size: 16px;
          color: $activeColor;
        }
      }
    }
  }
</style>
